{%- if predictive_search.performed -%}
  <div id="predictive-search-results">
    {%- if predictive_search.resources.products.size > 0 -%} 
      <h2 id="predictive-search-products" class="predictive-search__heading">
        {{ 'templates.search.products' | t }}

        <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
          <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
        </svg>
      </h2>
    {%- endif -%}
    <ul id="predictive-search-results-list" class="predictive-search__results-list list-unstyled" role="listbox" aria-labelledby="predictive-search-products">
      {%- for product in predictive_search.resources.products -%}
        <li id="predictive-search-option-{{ forloop.index }}" class="predictive-search__list-item" role="option" aria-selected="false">
          <a href="{{ product.url }}" class="predictive-search__item predictive-search__item--link link link--text" tabindex="-1">
            {%- if product.featured_media != blank -%}
              <img class="predictive-search__image"
                src="{{ product.featured_media | img_url: '150x' }}"
                alt="{{ product.featured_media.alt }}"
                width="50"
                height="{{ 50 | divided_by: product.featured_media.preview_image.aspect_ratio }}"
              >
            {%- endif -%}
            <div class="predictive-search__item-content{% unless settings.predictive_search_show_vendor or settings.predictive_search_show_price %} predictive-search__item-content--centered{% endunless %}">
              {%- if settings.predictive_search_show_vendor -%} 
                <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span><div class="predictive-search__item-vendor caption-with-letter-spacing">{{ product.vendor }}</div>
              {%- endif -%}
              <h3 class="predictive-search__item-heading h5">{{ product.title }}</h3> 
              {%- if settings.predictive_search_show_price -%}
                {% render 'price', product: product, use_variant: true, show_badges: false %} 
              {%- endif -%}
            </div>
          </a>
        </li>
      {%- endfor -%}
      <li id="predictive-search-option-search-keywords" class="predictive-search__list-item" role="option">
        <button class="predictive-search__item predictive-search__item--term link link--text h5 animate-arrow" tabindex="-1">
          {{ 'templates.search.search_for' | t: terms: predictive_search.terms }}
          {% render 'icon-arrow' %}
        </button>
      </li> 
    </ul>

    <div class="predictive-search__loading-state" aria-hidden="true">
      <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
        <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
      </svg>
    </div>
  </div>

  <span class="hidden" data-predictive-search-live-region-count-value>
    {%- if search.results_count == 0 -%}
      {{ 'templates.search.no_results' | t: terms: predictive_search.terms }}
    {%- else -%}
      {{ 'templates.search.results_with_count' | t: terms: predictive_search.terms, count: predictive_search.resources.products.size }}
    {%- endif -%}
  </span>
{%- endif -%}
